<template>
    <div id="app">
        <nav>
            <router-link to="/">Home</router-link> |
            <button @click="jumpToAbout">About</button>
        </nav>
        <!-- <keep-alive include="" exclude max="10"> -->
        <router-view />
        <!-- </keep-alive> -->
        <!-- keepalive缓存 -->
    </div>
</template>
<script>
export default {
    methods: {
        jumpToAbout() {
            // 编程式导航
            // this.$router.push({ path: '/about', params: { name: '苏明' } });
            this.$router.push({ path: '/about', query: { name: '苏明' } });
            // this.$router.push({ name: 'about', params: { name: '苏明' } });
            // this.$router.push({ path: 'about', query: { name: '苏明' } });
            // 路由跳转传参的时候,可以使用query传递也可以使用params传递
            // 接收的时候使用对应的this.$route.params/query接收就可以
            // name 可以和query .params匹配
            // path 只能和query匹配
        }
    }
};
</script>
<style lang="less">
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}

nav {
    padding: 30px;

    a {
        font-weight: bold;
        color: #2c3e50;

        &.router-link-exact-active {
            color: #42b983;
        }
    }
}
</style>
